<template>
  <div class="care-box">
<!--    <div class="care-item" v-for="item in userList" :key="item.userId">-->
<!--      <user-item :item="item"></user-item>-->
<!--    </div>-->

    <el-row>
      <el-col :span="8" v-for="item in userList" :key="item.userId">
        <user-item :item="item"></user-item>
      </el-col>
    </el-row>
<!--    <user-item v-for="item in userList" :key="item.userId" :item="item"></user-item>-->
  </div>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import emitter from "@/utils/emitter.js";
import UserItem from "@/components/UserItem.vue";
import {getAllCaredUser} from "@/api/api.js";

const pageParam = reactive({
  page:1,
  pageSize:10
})

const userList = ref([])

onMounted(async()=>{
  emitter.emit("switchActive",1)

  const res = await getAllCaredUser(pageParam.page,pageParam.pageSize)
  console.log(res)
  userList.value = res.data.records

  userList.value.forEach(ele=>{
    ele.hasCare = 1
  })
})
</script>
<style lang="scss" scoped>
.care-box{
  box-sizing: border-box;
  width: 100%;
  display: flex;
  //.care-item{
  //  width: 400px;
  //  height: 200px;
  //  background: #000;
  //}
}
</style>